<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--  关闭缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!--  一会试验下是否有必要存在 -->
<meta name="apple-touch-fullscreen" content="yes"> 
<!--网站开启对 web app 程序的支持。-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--在 web app 应用下状态条（屏幕顶部条）的颜色；-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--使设备浏览网页时对数字不启用电话功能-->
<meta name="format-detection" content="telephone=no">
<!--使用wtai协议进行拨打电话。-->
<meta http-equiv="x-rim-auto-match" content="none"/>
<!--标示移动站点-->
<meta name="HandheldFriendly" content="true"/>
<title>无标题文档</title>
<link rel="stylesheet" href="swiper.min.css" type="text/css"/>
<style type="text/css">
body{max-width:640px;margin:0px auto;padding:0px;font-family:"微软雅黑"}
ul,li,img,h1,p,span,tr,td,dl,dt,dd{margin:0px;padding:0px;}
li{list-style:none} img{border:0px}
.swiper-container{width:100%;margin-top:10px;}
.swiper-wrapper{height:400px;}

/*tab切换按钮样式*/
.my-pagination{
	position:relative;
	bottom:0px !important;
	
	height:30px;
	margin-bottom:10px;
}
.swiper-pagination-bullet {
	border-radius:0px;
	-webkit-border-radius:0px;
	opacity: 1;
	margin:0px 5px 0px 0px !important;
	
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	color:#000;
	background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
	color:#fff;
	background: #007aff;
}
</style>
</head>

<body>

<div class="swiper-container">

	<div class="my-pagination"></div>
    
    <ul class="swiper-wrapper">
        <li class="swiper-slide" style="background:#039">Slide 1</li>
        <li class="swiper-slide" style="background:#030">Slide 2</li>
        <li class="swiper-slide" style="background:#960">Slide 3</li>
    </ul>

</div>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="swiper.min.js" type="text/javascript"></script>
<script type="text/javascript"> 	 
	var mySwiper = new Swiper('.swiper-container',{
	pagination: '.my-pagination',
	paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
	autoplay: 2000, // 自动切换的时间间隔,不设定该参数slide不会自动切换。
	autoplayDisableOnInteraction:false, //用户操作swipe之后，是否禁止自动切换。默认为true：停止。
	paginationBulletRender: function (index, className) {
	switch (index) {
	  case 0: name='Swiper应用';break;
	  case 1: name='Swiper教程';break;
	  case 2: name='Swiper介绍';break;
	  default: name='';
	}
		  return '<span class="' + className + '">' + name + '</span>';
	  }
	})
</script>
</body>
</html>
